<!-- @module holidaylaws -->
<!-- @author: YunTao.Li -->
<!-- @description: 假期排班信息维护 -->
<!-- @since: 2019-12-18 17:56:48 -->

<template>
  <el-card  class="box-card el-card-flex" >
    <div slot="header" class="clearfix">
    <span>
        <i class="el-icon-position"></i>
         查询信息
      </span>
    </div>
    <!-- form begin -->
    <div style="margin: 10px" >
    <el-form ref="queryForm" label-width="120px" class="div-header" :model="queryForm" size="mini">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="年份" prop="year">
              <el-date-picker
                v-model="queryForm.year"
                style="width: 240px"
                type="year"
                placeholder="年份"
                value-format="yyyy"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="日期" prop="hdate">
              <el-date-picker
                v-model="queryForm.hdate"
                style="width: 240px"
                type="date"
                placeholder="日期"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="btnStyle">
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">查询</el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh"
            @click="resetForm('queryForm')"
          >重置</el-button>
        </div>
    </el-form>
    </div>
    <!-- form end -->
      <div class="div-button">
        <el-button
          icon="el-icon-menu"
          type="success"
          :disabled.sync="btn_add_disabled"
          size="small"
          @click="onAdd"
        >新增</el-button>
        <!-- <el-button
          icon="el-icon-menu"
          type="warning"
          size="small"
          :disabled.sync="btn_edit_disabled"
          @click="onEdit"
        >编辑</el-button>-->
        <el-button
          icon="el-icon-menu"
          type="danger"
          size="small"
          :disabled.sync="btn_delete_disabled"
          @click="handleDelete"
        >删除</el-button>
      </div>
      <!-- table begin-->
      <div class="el-flex el-box-column " style="margin: 10px;">
        <el-card class="box-card el-card-flex" >
        <div slot="header" class="clearfix">
        <span>
        <i class="el-icon-position"></i>
          考勤信息
        </span>
        </div>

        <div class="el-flex el-box-column" style="margin: 5px;" >
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            class="tableStyle"
            height="100%"
            style="width: 100%"
            @selection-change="onSelectChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column align="center" type="index" width="55" label="序号" />
            <!--组织-->
            <el-table-column  align="center" label="组织" min-width="220px">
              <template slot-scope="scope">
                <span>{{ scope.row.orgName }}</span>
              </template>
            </el-table-column>

            <!--年份-->
            <el-table-column   align="center" label="年份" min-width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.year }}</span>
              </template>
            </el-table-column>

            <!--日期-->
            <el-table-column  align="center" label="日期" min-width="140px">
              <template slot-scope="scope">
                <span>{{ scope.row.hDate | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>

            <!--开始日期-->
            <el-table-column  align="center" label="开始日期" min-width="140px">
              <template slot-scope="scope">
                <span>{{ scope.row.startDate | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>

            <!--结束日期-->
            <el-table-column  align="center" label="结束日期" min-width="140px">
              <template slot-scope="scope">
                <span>{{ scope.row.endDate | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>

            <!--天数-->
            <el-table-column  align="center" label="天数" min-width="120px">
              <template slot-scope="scope">
                <span>{{ scope.row.days }}</span>
              </template>
            </el-table-column>

            <!--排班类型-->
            <el-table-column
              prop="hType"
              :formatter="dictFormatter"
              label-class-name="holidayLawType"
              min-width="140px"
              align="center"
              label="排班类型"
            >
              <!-- <template slot-scope="scope">
                <span>{{ scope.row.hType }}</span>
              </template>-->
            </el-table-column>

            <!--描述-->
            <el-table-column  align="center" label="描述" min-width="200px">
              <template slot-scope="scope">
                <span>{{ scope.row.hDesc }}</span>
              </template>
            </el-table-column>
          </el-table>
      </div>
      <!-- table end -->
      <pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page.sync="queryForm.page"
        :limit.sync="queryForm.limit"
        @pagination="getList"
      />
        </el-card>
      <inputForm ref="holidayLawsInputDialog" @submitFunc="onSubmitForm" />
      </div>
  </el-card>
</template>

<script>
import {
  holidayLawsList,
  holidayLawsAdd,
  holidayLawsUpdate,
  holidayLawsDelete
} from '@/api/attendance/holidaylaws-service'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import inputForm from './components/form/holidaylaws-form'

export default {
  components: { Pagination, inputForm },
  data() {
    return {
      msg: '-',
      text_form: '查询信息',
      text_grid: '考勤信息',
      list: [],
      listLoading: true,
      total: 0,
      btn_add_disabled: false,
      btn_delete_disabled: false,
      lastSelectedData: null,
      queryForm: {
        page: 1,
        limit: 20,
        year: '',
        hdate: null
      },
      inputRules: {},
      height: 'calc(100% - 16px)'
    }
  },
  created() {
    this.getList()
    this.onSelectChange()
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getList() {
      this.listLoading = true
      holidayLawsList(this.queryForm).then(response => {
        this.list = response.data.records
        this.total = response.data.total

        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    handleAdd(data) {
      // 添加方法
      holidayLawsAdd(data).then(response => {
        if (response.code === 200) {
          this.getList()
          // 清理子组件
          this.$refs.holidayLawsInputDialog.resetFormData()
        } else {
          this.$message.error(response.message)
        }
      })
    },
    handleEdit(data) {
      // 编辑方法
      console.log('编辑 id :' + data.leaveId)
      holidayLawsUpdate(data.leaveId, data).then(response => {
        if (response.code === 200) {
          this.getList()
          // 清理子组件
          this.$refs.holidayLawsInputDialog.resetFormData()
        } else {
          this.$message.error(response.message)
        }
      })
    },
    handleDelete() {
      // 删除方法
      this.$confirm('确定要删除么?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          holidayLawsDelete(this.lastSelectedData.holidayId).then(response => {
            if (response.code === 200) {
              this.$message({ type: 'success', message: '删除成功!' })
              this.getList()
            } else {
              this.$message.error(response.message)
            }
          })
        })
        .catch(err => {
          console.error(err)
        })
    },
    inputFormToggle(selectedData) {
      this.$refs.holidayLawsInputDialog.toggele(selectedData)
    },
    onAdd() {
      this.inputFormToggle(null)
    },
    onEdit() {
      const selectedData = JSON.parse(JSON.stringify(this.lastSelectedData))
      this.inputFormToggle(selectedData)
    },
    onSubmitForm(data) {
      // 表单提交事件
      const holidayId = data.holidayId
      if (
        holidayId === null ||
        holidayId === '' ||
        JSON.stringify(holidayId) === '{}'
      ) {
        this.handleAdd(data)
      } else {
        this.handleEdit(data)
      }
    },
    onSelectChange(selection) {
      if (!selection) {
        return false
      }
      this.selectedLength = selection.length || 0
      this.lastSelectedData = selection[this.selectedLength - 1]
      // this.btn_add_disabled = true
      this.btn_delete_disabled = true

      // 控制按钮是否可用行为
      if (this.selectedLength && this.selectedLength > 1) {
        this.btn_delete_disabled = true
      } else if (this.selectedLength && this.selectedLength === 1) {
        //
        this.btn_delete_disabled = false
      } else {
        //
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import './index.scss';

</style>
